<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>小球</title>
		<style>
			.xiao {
				background-color: rgb(133, 84, 224);
				width: 50px;
				height: 50px;
				border-radius: 50%;
				position: absolute;
				/*transition: all 0.1s; */
			}
			
			#da {
				width: 600px;
				height: 400px;
				border: 3px solid #ff8742;
				position: relative;
				/* background-image: url(); */
			}
		</style>
	</head>

	<body>
		<div id="da">
			<div class="xiao"></div>
		</div>
	</body>

</html>
<script>
	var xiao = document.querySelector('.xiao');
	var da = document.querySelector("#da");
	var dah = da.clientHeight;
	var xiaoh = xiao.clientHeight;
	var daw = da.clientWidth;
	var xiaow = xiao.clientWidth;
	// 小球的距离;
	var hh = dah - xiaoh;
	var ww=daw-xiaow;
	
	// 上下移动
	var a = 0;

	function shang1() {
//		clearInterval(s);
		var s = setInterval(function() {
			var shang = xiao.offsetTop;
			var h = da.clientHeight;
			shang--;
			if(shang < 0) {
				clearInterval(s);
				xia();
			}
			xiao.style.top = shang + "px";
		}, 10)
	}

	function xia() {
//		clearInterval(x)
		var x = setInterval(function() {
			var shang = xiao.offsetTop;
			var h = da.clientHeight;
			shang++;
			if(shang > hh) {
				clearInterval(x);
				shang1();
			}
			xiao.style.top = shang + "px";
//			console.log(shang, hh, );
		}, 10)
	}
	function left() {
//		clearInterval(l);
		var l = setInterval(function() {
			var left1 = xiao.offsetLeft;
			var w = da.clientWidth;
			left1++;
			if(left1 > ww) {
				clearInterval(l);
				right();
			}
			xiao.style.left = left1 + "px";
//			console.log(shang, hh, );
		}, 10)
	}
	function right() {
		clearInterval(y);
		var y = setInterval(function() {
			var left1 = xiao.offsetLeft;
			var w = da.clientWidth;
			left1--;
			if(left1 < 0) {
				clearInterval(y);
				left();
			}
			xiao.style.left = left1 + "px";
//			console.log(shang, hh, );
		}, 10)
	}
	
		xia();
		left();
	
</script>